import React, { Component } from 'react';
import { SafeAreaView,Text ,View,FlatList,TouchableOpacity} from 'react-native';
import { SearchBar,} from 'react-native-elements'
import Placeholder from 'rn-placeholder';

import Styles from '../styles/Search';
import {searchApi} from '../api/List';


export default class Search extends Component {
  state ={
    keywords: '',
    dataList:[],
    isLoading:true
  }
  getData = (keywords) =>{
    
    searchApi(keywords).then(res =>{
      // console.log(res);
      if (res.success){
        // console.log(res.data);
        this.setState({
          keywords,
          dataList: res.data,
          isLoading:false
        })
      } else {
        this.setState({
          keywords,
          isLoading:false
        })
      }
     
    })
  }
  goDetail = (uniqueName) =>{
    this.props.navigation.navigate('Detail',{
      uniqueName
    });
  }
  componentDidMount(){
    const { navigation } = this.props;
    const keywords = navigation.getParam('keywords', 'b');
    this.getData(keywords);
  }
  renderList =()=>{
    const {isLoading,dataList} = this.state;
    if (isLoading){
      return (<View>
        <Placeholder.Line
          color="#ffff00"
        />
        <Placeholder.Line
          color="#ffff00"
        />
        <Placeholder.Line
          color="#ffff00"
        />
        <Placeholder.Line
          color="#ffff00"
        />
        <Placeholder.Line
          color="#ffff00"
        />
      </View>)
    } else if (dataList.length === 0) {
      return (<View><Text>没有数据咯</Text></View>)
    }
    const renderRow = ({item}) => (<View
      key={item.uniqueName}
      style={Styles.listItem}
    >
      <TouchableOpacity onPress={()=>{this.goDetail(item.uniqueName)}}>
        <Text style={Styles.listFont}>{`${item.name}(${item.symbol})`}</Text>
      </TouchableOpacity>
    </View>)
    return (
      <FlatList
        // key={'search-list'}
        data={dataList}
        renderItem={renderRow}
        keyExtractor={item => item.name}
      />
    );
  }
  
  render() {
    const {keywords} = this.state;
    return (
      <SafeAreaView >
        <SearchBar
        placeholder={keywords ? keywords : '请输入币种名'} />
        {this.renderList()}
      </SafeAreaView>
    );
  }
}

